<template>
    <!-- col-11 -->
    <div class="row">
        <div class="col-1 d-flex justify-content-end">
            <strong>启动时</strong>
        </div>
        <div class="col-2 d-flex justify-content-start">
            <input class="form-check-input" @click="BasicClickToSave({ start: { selector: 1 } })" type="radio"
                name="basicStartSelector" id="basicStartSelector1" :value=1 v-model:="basicConsole.start.selector">
            <label class="form-check-label" for="basicStartSelector1">
                打开主页
            </label>
        </div>
        <div class="col-8 d-flex justify-content-start">
            <!-- 输入框，根据 basicConsole.startSelector 的值启用或禁用 -->
            <input type="text" v-model="basicConsole.start.mainPage" :disabled="basicConsole.start.selector !== 1"
                @keyup.enter="BasicClickToSave({ start: { mainPage: basicConsole.start.mainPage } })"
                class="form-control-md" style="width: 50%;" placeholder="www.baidu.com">
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" @click="BasicClickToSave({ start: { selector: 2 } })" type="radio"
                name="basicStartSelector" id="basicStartSelector2" :value=2 v-model="basicConsole.start.selector">
            <label class="form-check-label" for="basicStartSelector2">
                继续浏览上次关闭浏览器时在看的网页
            </label>
        </div>

    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" @click="BasicClickToSave({ start: { selector: 3 } })" type="radio"
                name="basicStartSelector" id="basicStartSelector3" :value=3 v-model="basicConsole.start.selector">
            <label class="form-check-label" for="basicStartSelector2">
                打开以下网页
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-2   offset-1">
            <textarea type="text" class="textarea-control-md" v-model="basicConsole.start.openPage"
                :disabled="basicConsole.start.selector !== 3"
                @keyup.enter="BasicClickToSave({ start: { openPage: basicConsole.start.openPage } })"
                style="width: 100%; height: 10vh;  box-shadow: none; " />
        </div>

    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>搜索</strong>
        </div>
        <div class="col-2 d-flex justify-content-start ">
            <select class="form-select bg-light" v-model="basicConsole.search.searchSector"
                style="height: 90%; background-color: gray;" id="exampleSelect"
                @change="BasicClickToSave({ search: { searchSector: basicConsole.search.searchSector } })">
                <option :value=1>360搜索</option>
                <option :value=2>Google</option>
                <option :value=3>谷歌</option>
                <option :value=4>有道</option>
            </select>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" v-model="basicConsole.search.selectionForSearchBar"
                id="basicSearchSelectionForSearchBar"
                @change="BasicClickToSave({ search: { selectionForSearchBar: basicConsole.search.selectionForSearchBar } })">
            <label class="form-check-label" for="basicSearchSelectionForSearchBar">
                在被选中文本的右上角显示“划词搜索工具条”
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" v-model="basicConsole.search.autoRecommendWords"
                id="basicSearchAutoRecommendWords"
                @change="BasicClickToSave({ search: { autoRecommendWords: basicConsole.search.autoRecommendWords } })">
            <label class="form-check-label" for="basicSearchAutoRecommendWords">
                启用搜索栏的热搜词推荐功能
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="basicSearchShowAddressBarSuggest"
                v-model="basicConsole.search.showAddressBarSuggest"
                @change="BasicClickToSave({ search: { showAddressBarSuggest: basicConsole.search.showAddressBarSuggest } })">
            <label class="form-check-label" for="basicSearchShowAddressBarSuggest">
                地址栏搜索展示联想词
            </label>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>默认浏览器</strong>
        </div>
        <div class="col-2 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" value="" id="basicDefaultBrowserSetDefaultBrowser"
                v-model="basicConsole.defaultBrowser.setDefaultBrowser"
                @change="BasicClickToSave({ defaultBrowser: { setDefaultBrowser: basicConsole.defaultBrowser.setDefaultBrowser } })">
            <label class="form-check-label" for="basicDefaultBrowserSetDefaultBrowser">
                设置为默认浏览器
            </label>
        </div>
    </div>
</template>


<script setup lang="ts">
import { useBasicStore } from '@/store/console/basic'
import { showSaveMsg } from '@/utils/message'

import * as basicApi from '@/api/console/basicConsole'
const basicStore = useBasicStore()
// const basicConsole = computed(() => basicStore.getBasicConsole)
const { basicConsoleState: basicConsole } = storeToRefs(basicStore)

basicApi.getBasicConsole().then(
    (res) => basicStore.updateBasicConsole(res as unknown as BasicConsoleApiModel)
);
function BasicClickToSave(param: BasicConsoleApiModel) {
    basicApi.updateBasicConsole(param)
    showSaveMsg()
}
</script>

<style scoped>
.form-check-input {
    margin-right: 8px;
    /* 在 input 右侧添加 8px 的边距 */
}
</style>



<script lang="ts">
import { computed, defineComponent } from 'vue'
import { BasicConsoleApiModel } from '@/type/console/basicConsole'
import { storeToRefs } from 'pinia'

export default defineComponent({
    name: 'BasicConsole'
})
</script>